<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>事件冒泡应用：事件委托</title>
	<style type="text/css">
		.son {
			margin-left: 50px;
			text-align: center;
			line-height: 50px;
			background-color: lightblue;
			width: 100px;
			height: 50px;
			border: 1px solid lightcoral;
		}
		.bubble {
			margin-top: 20px;
			background-color: bisque;
		}
	</style>
</head>
<body>
	<!-- 冒泡--事件委托 -->
	<div class="father">
		<p>验证冒泡对应的DOM事件流:</p>
	    <div class="son">点击son盒子</div>
	</div>
	<div class="bubble">
		<p>案例-事件委托：（忽略上一个例子的document弹窗）</p>
		<ul>
		    <li>知否知否，点我背景变成粉色！</li>
		    <li>知否知否，点我背景变成粉色！</li>
		    <li>知否知否，点我背景变成粉色！</li>
		    <li>知否知否，点我背景变成粉色！</li>
		    <li>知否知否，点我背景变成粉色！</li>
		</ul>
	</div>
	    

	<script>
	    // onclick 和 attachEvent（ie） 在冒泡阶段触发
	    // 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 
	    // son -> father ->body -> html -> document
	    var son = document.querySelector('.son');
		// 给son注册单击事件
	    son.addEventListener('click', function() {
	        alert('点击son-冒泡-son');
	    }, false);
		// 给father注册单击事件
	    var father = document.querySelector('.father');
	    father.addEventListener('click', function() {
	        alert('点击son-冒泡-father');
	    }, false);
		// 给document注册单击事件，省略第3个参数
	    document.addEventListener('click', function() {
	        alert('点击son-冒泡-document');
	    })

		// 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
		var ul = document.querySelector('ul');
		ul.addEventListener('click', function(e) {
		    // e.target 这个可以得到我们点击的对象
		    e.target.style.backgroundColor = 'pink';
		})
	</script>
</body>
</html>